import image1 from '../assets/images/1.jpg' // 加载图片
import image2 from '../assets/images/2.jpg'
import image3 from '../assets/images/3.jpg'
import image4 from '../assets/images/4.jpg'
import image5 from '../assets/images/5.jpg'
import image6 from '../assets/images/6.jpg'
import image7 from '../assets/images/7.jpg'

class DomCreate {
  /**
    * 构造函数
    * @param {*} el
    */
  constructor (el = 'app') {
    this.$el = document.getElementById(el)
  }

  /**
     * 渲染dom
     * @param {*} name
     * @param {*} description
     */
  renderer (name, description) {
    const dom = document.createElement('div')
    dom.innerHTML = this.template(name, description)
    this.$el.appendChild(dom) // 插入dom
  }

  /**
     * 字符模板
     * @param {*} name
     * @param {*} description
     */
  template (name, description) {
    let prefix = ''
    const images = [image1, image2, image3, image4, image5, image6, image7]
    const pathlist = window.location.pathname.split('/').filter(p => p)
    prefix = Array.from(new Array(pathlist.length)).map(_ => '/').join('..') // 兼容子目录部署
    if (prefix) { prefix = `.${prefix}` }
    return `
                <div class="container">
                    <div class="jumbotron" style="background:#222323;">
                        <h1>${name}</h1>
                        <p>${description}</p>
                        <p>
                            <a class="btn btn-success btn-lg" href="${prefix}" role="button">PAGE-Index</a>
                            <a class="btn btn-primary btn-lg" href="${prefix}pagea" role="button">PAGE-A</a>
                            <a class="btn btn-primary btn-lg" href="${prefix}pageb" role="button">PAGE-B</a>
                            <a class="btn btn-primary btn-lg" href="${prefix}pagec" role="button">PAGE-C</a>
                        </p>
                    </div>
                    <ul class="list-group">
                        ${images.map(src => `<li class="list-group-item"><img src="${prefix}${src}" /></li>`).join('')}
                    </ul>
                </div>
        `
  }
}

export default DomCreate
